<template>
	<view v-if="userIdentify == 4">
		<headerFixedBarVue :backgroundColor="headerBackgroundColor" title="西望商城" :BackPage="0" backIcon="https://img.js.design/assets/img/664e35f997fdce414c2ce95e.png#c0319aa0dd57cc25215682bbeb6a45ea"></headerFixedBarVue>
		<headerSwiper :swiperImg="swiperImg" :swiperHeight="700"></headerSwiper>
		<FlexNavVue></FlexNavVue>
		<FeaturedImageVue></FeaturedImageVue>
		<view class="Featured-Products">
			<text class="Featured-title">推荐商品</text>
			<view class="equipGoodsBox">
				<equipGoodsCardVue :equipGoods="equipGoodsData"></equipGoodsCardVue>
			</view>
		</view>
	</view>
	<!-- <NoDataVue v-else message="还没有装备商城,请敬请期待哦 ~" addDataText="去其他地方看看吧!" toPageUrl="/pages/home/index"></NoDataVue> -->
	<view class="noImg">
		<image src="https://file.whshiyuan.cn:9000/toopu/compressed/8451741172530_compressed_img.jpg" mode="aspectFill"></image>
	</view>
	<bottomNavBar></bottomNavBar>
</template>
<script setup>
	import headerFixedBarVue from '@/components/headerFixedBar.vue';
	import headerSwiper from '@/components/headerSwiper.vue'
	import FlexNavVue from './components/FlexNav.vue';
	import FeaturedImageVue from './components/FeaturedImage.vue';
	import NoDataVue from '@/components/NoData.vue';
	import equipGoodsCardVue from '@/components/equipGoodsCard.vue';
	import bottomNavBar from '@/components/bottomNavBar.vue';
	import {ref} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import {equipshop} from '@/config/API/equip.js'
	const equipGoodsData = ref([])
	const userIdentify = ref(uni.getStorageSync('userInfo').identify);
	const swiperImg = ref([
		'/applet/static/1736150014.jpeg',
		'/applet/static/1736150014.jpeg',
		'/applet/static/1736150014.jpeg',
		'/applet/static/1736150014.jpeg'
	])
	
	onLoad(async () => {
		try {
			const GetEquipshopData = await equipshop()
			equipGoodsData.value = GetEquipshopData.data
			console.log(equipGoodsData.value);
		} catch (error) {
			console.log('获取装备商品展示失败',error);
		}
	});

	const headerBackgroundColor = ref('transparent');
	const onPageScroll = (e) => {
		// console.log(e);
		const scrollThreshold = 100;
		if (e.scrollTop > scrollThreshold) {
			headerBackgroundColor.value = '#fff';
		} else {
			headerBackgroundColor.value = 'transparent';
		}
	};
	// 在uni-app中注册页面滚动事件
	if (typeof getCurrentPages === 'function') {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		currentPage.onPageScroll = onPageScroll;
	}
	
</script>
<style lang="scss" scoped>
	.Featured-Products{
		width: 100%;
		min-height: 150rpx;
		padding: 40rpx 20rpx 150rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #ffffff 20%, #f5f6f7 80%);
		.Featured-title{
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 50rpx;
			&::after{
				display: block;
				content: '';
				width: 22%;
				height: 5rpx;
				background-color: #cacaca;
				border-radius: 50%;
			}
			&::before{
				display: block;
				content: '';
				width: 22%;
				height: 5rpx;
				background-color: #cacaca;
				border-radius: 50%;
			}
		}
		.equipGoodsBox{
			padding: 20rpx 0;
		}
	}
	
	.noImg {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		overflow: hidden;
		
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
</style>

<!-- <template>
	<view class="equipNone">
		<view class="isNull">
			<image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png#04f07b62b993fbf1a7b059a3602a32e4" mode=""></image>
			<text>暂无装备商品...</text>
		</view>
	</view>
	<bottomNavBar></bottomNavBar>
</template>

<script setup>
	import bottomNavBar from '@/components/bottomNavBar.vue';
</script>
<style lang="scss" scoped>
	.equipNone{
		width: 100%;
		position: relative;
		.isNull{
			width: 100%;
			height: calc(100vh - 110rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 30rpx;
			image{
				width: 400rpx;
				height: 400rpx;
			}
			text{
				color: rgba(153, 153, 153, 1);
			}
		}
	}
</style> -->